<template>
  <div>
    <!--    <a-spin :spinning="spinning"/>-->
    <a-form ref="formRef" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol"
            style="margin-top: 46px">

      <a-col :lg="16" v-for="(item,index) in nameArr">
        <a-form-item :label="item.value" :name="item.key">
          <a-popconfirm
            :title="`是否要${queryParam[item.key]?'关闭':'开启'}?`"
            ok-text="是"
            cancel-text="否"
            @confirm="confirm(item)"
          >
            <a-switch
              v-model:checked="queryParam[item.key]"
              @click="(a,b)=>switchClick(a,b,item)"
              :checkedValue="1"
              :unCheckedValue="0"
            />
          </a-popconfirm>
        </a-form-item>
      </a-col>

      <a-col :lg="16">
        <a-form-item label=" " name="" :colon="false">
          <a-button type="primary" @click="clickSubmit">保存</a-button>
        </a-form-item>
      </a-col>
    </a-form>
  </div>
</template>

<script lang="ts" name="novel-websiteInfo" setup>
  import {ref, reactive} from 'vue';
  import {BasicTable, useTable, TableAction} from '/@/components/Table';
  import {useListPage} from '/@/hooks/system/useListPage';
  import {columns} from './WebsiteInfo.data';
  import {list, deleteOne, batchDelete, getImportUrl, getExportUrl} from './WebsiteInfo.api';
  import {downloadFile} from '/@/utils/common/renderUtils';
  import WebsiteInfoModal from './components/WebsiteInfoModal.vue'
  import {defHttp} from '/@/utils/http/axios';
  import {message} from 'ant-design-vue';
  import result from "virtual:*";

  const formRef = ref();

  let queryParam = reactive<any>({
    open_screen_ad: '',
    read_bottom_banner_ad: '',
    read_page_roll_mode_ad: '',
    read_page_turning_mode_ad: '',
    task_page_incentive_video_ad: '',
    unlock_page_incentive_video_ad: '',
  });

  const nameArr = ref([
    {
      key: 'open_screen_ad',
      value: '开屏广告'
    }, {
      key: 'read_bottom_banner_ad',
      value: '阅读底部banner'
    }, {
      key: 'read_page_roll_mode_ad',
      value: '阅读页滚动模式原生广告'
    }, {
      key: 'read_page_turning_mode_ad',
      value: '阅读页翻页模式原生广告'
    }, {
      key: 'task_page_incentive_video_ad',
      value: '解锁页激励视频广告'
    }, {
      key: 'unlock_page_incentive_video_ad',
      value: '任务页激励视频广告'
    }
  ])

  const resultData=ref()

  async function init() {
    const data = await list({name:'ad_pos_switch'})
    resultData.value=data
    let res=JSON.parse(data[0].value)
    for (const key in queryParam) {
      queryParam[key]=res[key]
    }
  }

  init()
  const spinning = ref<boolean>(true)
  const toggleSearchStatus = ref<boolean>(false);
  const registerModal = ref();
  //注册table数据
  const {prefixCls, tableContext, onExportXls, onImportXls} = useListPage({
    tableProps: {
      title: 'website_info',
      api: list,
      columns,
      canResize: false,
      useSearchForm: false,
      actionColumn: {
        width: 120,
        fixed: 'right',
      },
      beforeFetch: (params) => {
        return Object.assign(params, queryParam);
      },
    },
    exportConfig: {
      name: "website_info",
      url: getExportUrl,
      params: queryParam,
    },
    importConfig: {
      url: getImportUrl,
      success: handleSuccess
    },
  });
  const [registerTable, {reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource}, {rowSelection, selectedRowKeys}] = tableContext;
  const labelCol = reactive({
    xs: {span: 24},
    sm: {span: 7},
  });
  const wrapperCol = reactive({
    xs: {span: 24},
    sm: {span: 16},
  });


  /**
   * 成功回调
   */
  function handleSuccess() {
    (selectedRowKeys.value = []) && reload();
  }

  function confirm(item) {
    queryParam[item.key] = queryParam[item.key]===1?0:1
  }

  function switchClick(a, b,item) {
    console.log(a, b,item)
    queryParam[item.key] = a===1?0:1
  }

  async function clickSubmit() {
    let url=resultData.value[0].id===''?'/novel/welfareConfig/add':'/novel/welfareConfig/edit'
    let params=JSON.parse(JSON.stringify(resultData.value))
    params[0].value=JSON.stringify(queryParam)
    const data=await defHttp.post({ url, params })
    // message.success('操作成功');
  }


</script>

<style lang="less" scoped>
  .jeecg-basic-table-form-container {
    .table-page-search-submitButtons {
      display: block;
      margin-bottom: 24px;
      white-space: nowrap;
    }

    .query-group-cust {
      width: calc(50% - 15px);
      min-width: 100px !important;
    }

    .query-group-split-cust {
      width: 30px;
      display: inline-block;
      text-align: center
    }
  }
</style>
